<template>
    <el-dialog width="26vw" class="flex-dialog" v-model="info.visible" @close="handleClose"  >
        <template #header>
            <div style="font-size:var(--18FontSize); font-weight:500; color:#525866;">编辑任务</div>
        </template>
        <el-form ref="myForm" class="flex-form" :model="form" :rules="rules" label-position="top">
            <el-form-item label="开始推送时间" prop="startTime" >
                <FlexDatePicker :data="startTimeOpt" :form="form" />
            </el-form-item>
            <el-form-item label="任务截止时间" prop="endTime">
                <FlexDatePicker :data="endTimeOpt" :form="form" />
            </el-form-item>
            <el-form-item label="负责人" prop="userId">
                <FlexSelect :payload="userList" :data="selectOpt" :form="form" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="display:flex; gap:var(--mPadding); ">
                <div class="flex-btn middle opacity" style="flex:1;" @click="handleClose">取消</div>
                <div class="flex-btn middle" style="flex:1;" @click="handleSubmit">确认</div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { watch, ref, reactive, nextTick, onUnmounted } from 'vue';
    import { ElMessage } from 'element-plus';
    import { addOrUpdateTask } from '@/api/task.js';
    import FlexDatePicker from '@/components/FlexDatePicker.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    import FlexInputNum from '@/components/FlexInputNum.vue';
    import { formatDateTime } from '@/utils/date';
    
    const props = defineProps({
        info:{ type:Object },
        userList:{ type:Array }
    });
    const form = reactive({
        startTime:'',
        endTime:'',
        userId:''
    });
    const rules = reactive({
        startTime:[{ required:true, message:'请选择推送时间',  trigger:'blur' }],
        endTime:[{ required:true, message:'请选择任务截止时间',  trigger:'blur' }]
    });
    const todayTimestamp = new Date().getTime();
    const selectOpt = { paramKey:'userId', fullWidth:true, labelName:'userName', labelKey:'userId' };
    const startTimeOpt = { paramKey:'startTime', fullWidth:true, checkDisabledDate:(date)=>{
            return date.getTime() < todayTimestamp;
    }}
    const endTimeOpt = { paramKey:'endTime', fullWidth:true, checkDisabledDate:(date)=>{
            const timestamp = form.startTime ? form.startTime.getTime() : todayTimestamp;
            return date.getTime() < timestamp;
    }}
    const emit = defineEmits(['update:info', 'refresh']);
    const myForm = ref(null);
    watch(()=>form.startTime, ()=>{
        // 监听推送时间
        if ( form.startTime && form.endTime ) {
            if ( form.startTime.getTime() > form.endTime.getTime() ) {
                form.endTime = null;
            }
        }
    });
    // 重置状态
    function handleClose(){
        Object.keys(form).forEach(key=>{
            form[key] = '';
        })
        myForm.value.clearValidate();
        props.info.visible = false;
    }
    function handleSubmit(){
        myForm.value.validate(valid=>{
            if ( valid ){
                let params = { userId:form.userId, missionCode:props.info.row.missionCode };
                if ( form.startTime ) {
                    params.startTime = formatDateTime(form.startTime, false) + ' 00:00:00';
                }
                if ( form.endTime ) {
                    params.endTime = formatDateTime(form.endTime, false) + ' 23:59:59';
                } 
                addOrUpdateTask(params, true)
                .then(res=>{
                    if ( res.data.code === 200 ){
                        handleClose();
                        emit('refresh');
                    }
                })
                
            }
        })
    }
    watch(()=>props.info, ()=>{
        if ( props.info.forEdit ){
            const { startTime, endTime, userName } = props.info.row;
            if ( startTime ) {
                form.startTime = new Date(startTime);
            }
            if ( endTime ){
                form.endTime = new Date(endTime);
            }
            let id;
            props.userList.forEach(item=>{
                if ( item.userName === userName ) {
                    id = item.userId;
                }
            })
            form.userId = id;
        }
    })
   
</script>
